<template>
  <div class="DatabaseStatistics">
    <div class="dataBase_wrapper" v-for="item in dataBase" :key="item.id">
      <dataBase
        :id="item.id"
        :DiskData="item.DiskData"
        :lineValue="item.lineValue"
        :pieValue="item.pieValue"
        :pieLegend="item.pieLegend"
      ></dataBase>
    </div>
  </div>
</template>

<script>
import dataBase from "../components/DatabaseStatistics/Database.vue";
export default {
  name: "DatabaseStatistics",
  components: {
    dataBase,
  },
  data() {
    return {
      dataBase: [
        {
          id: 1,
          DiskData: 642,
          lineValue: [
            [10, 16, 13, 19, 5, 22, 11, 23, 14, 21],
            [4, 22, 5, 13, 14, 27, 14, 16, 10, 26],
            [8, 14, 9, 20, 10, 20, 27, 24, 25, 20],
          ],
          pieValue: [
            { value: 150, name: "已使用" },
            { value: 300, name: "未使用" },
          ],
          pieLegend: [{ name: "已使用" }, { name: "未使用" }],
        },
        {
          id: 2,
          DiskData: 125,
          lineValue: [
            [1, 16, 13, 19, 5, 1, 11, 23, 14, 21],
            [1, 22, 5, 13, 14, 27, 14, 16, 10, 26],
            [8, 14, 9, 1, 10, 20, 27, 24, 25, 1],
          ],
          pieValue: [
            { value: 100, name: "已使用" },
            { value: 300, name: "未使用" },
          ],
          pieLegend: [{ name: "已使用" }, { name: "未使用" }],
        },
        {
          id: 3,
          DiskData: 876,
          lineValue: [
            [1, 16, 13, 19, 5, 1, 11, 23, 14, 5],
            [4, 1, 5, 13, 14, 27, 14, 16, 10, 26],
            [8, 14, 9, 1, 10, 20, 5, 24, 25, 20],
          ],
          pieValue: [
            { value: 160, name: "已使用" },
            { value: 300, name: "未使用" },
          ],
          pieLegend: [{ name: "已使用" }, { name: "未使用" }],
        },
        {
          id: 4,
          DiskData: 234,
          lineValue: [
            [1, 16, 13, 19, 5, 1, 11, 23, 14, 5],
            [4, 1, 5, 13, 14, 10, 14, 16, 10, 26],
            [8, 14, 9, 1, 10, 20, 5, 6, 25, 20],
          ],
          pieValue: [
            { value: 120, name: "已使用" },
            { value: 300, name: "未使用" },
          ],
          pieLegend: [{ name: "已使用" }, { name: "未使用" }],
        },
        {
          id: 5,
          DiskData: 764,
          lineValue: [
            [1, 16, 13, 19, 5, 1, 11, 23, 14, 5],
            [4, 1, 5, 13, 14, 27, 14, 8, 10, 12],
            [8, 14, 9, 1, 10, 10, 5, 24, 25, 20],
          ],
          pieValue: [
            { value: 40, name: "已使用" },
            { value: 300, name: "未使用" },
          ],
          pieLegend: [{ name: "已使用" }, { name: "未使用" }],
        },
        {
          id: 6,
          DiskData: 542,
          lineValue: [
            [1, 10, 13, 19, 5, 1, 11, 3, 14, 5],
            [4, 1, 5, 13, 14, 10, 14, 16, 10, 26],
            [1, 14, 9, 1, 10, 20, 5, 24, 4, 20],
          ],
          pieValue: [
            { value: 200, name: "已使用" },
            { value: 300, name: "未使用" },
          ],
          pieLegend: [{ name: "已使用" }, { name: "未使用" }],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.DatabaseStatistics {
  margin: auto;
  min-width: 100%;
  min-height: 100%;
  background: #ffffff;
  border: 1px solid #707070;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-evenly;
  .dataBase_wrapper {
    width: 560px;
    height: 420px;
    background: #ffffff;
    border: 1px solid #707070;
    border-radius: 8px;
    overflow: hidden;
  }
}
</style>